<template>
<div>
    <div class="navbar-div">
        <van-nav-bar
            title="商品详情"
            left-text="返回"
            left-arrow
            @click-left="onClickLeft"
        />
    </div>
    <div>
        <van-swipe :autoplay="1000">
        <van-swipe-item v-for="(image, index) in goodsInfo.sildershow" :key="index">
          <img v-lazy="image" width="100%" height="240rem"/>
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="goods-text">
        <div class="goods-name">{{goodsInfo.productName}}</div>
        <div class="list-item-price">
            <b class="discount">折扣价:￥{{goodsInfo.presentPrice}}</b>
            <span class="price-text">原价:￥{{goodsInfo.oldPrice}}</span> 
            <div class="stock-text">库存：{{goodsInfo.stock}}</div>
        </div>
    </div>
    <div>
        <van-tabs swipeable sticky>
            <van-tab title="商品详情" v-if="goodsInfo.detail">
                <div class="detail" v-html="goodsInfo.detail">
                    <!-- <img src="http://images.baixingliangfan.cn/shopGoodsDetailImg/20180211/20180211173010_5098.jpg" width="100%" height="auto" alt="" />
                    <img src="http://images.baixingliangfan.cn/shopGoodsDetailImg/20180211/20180211173010_9217.jpg" width="100%" height="auto" alt="" /> -->
                </div>
            </van-tab>
             <van-tab title="商品详情" v-else>
                <div class="detail" >
                    <p>详情正在制作中......</p>
                </div>
            </van-tab>
            <van-tab title="评价">
                正在制作中
            </van-tab>
        </van-tabs>
    </div>

     <div class="goods-bottom">
            <div>
                <van-button size="large" type="primary" @click="addShoppingCart">加入购物车</van-button>
            </div>
            <div>
                <van-button size="large" type="danger" @click="settleGoods">直接购买</van-button>
            </div>
        </div>
</div>
</template>

<script>
    import axios from 'axios'
    import { Toast } from 'vant'
    export default {
        data() {
            return {
                userId: null,
                goodsId: null,
                goodsInfo:{},   //商品详细数据
                // goodsName: null,
                // goodsImg: null,
                // goodsPrice: null,
                // goodsQuanity: null,
            }
        },
        created(){
            if(localStorage.userInfo){
                let userInfo = JSON.parse(localStorage.userInfo)
                this.userId = userInfo.userId
            }
            this.goodsId= this.$route.query.goodsId ? this.$route.query.goodsId : this.$route.params.goodsId ? this.$route.params.goodsId : 1
            console.log(this.goodsId)
            this.getGoodsDetailInfo()
        },
        mounted(){
            this.$store.dispatch('HIDENAV')
        },
        destroyed(){
            this.$store.dispatch('SHOWNAV')
        },
        methods: {
            onClickLeft(){
                this.$router.go(-1)
            },
            getGoodsDetailInfo() {
                axios({
                    url:'http://localhost:3000/goods/detailInfoById',
                    method:'post',
                    data:{
                        goodsId:this.goodsId
                    }
                })
                .then(res=>{
                    if(res.status === 200){
                        if(res.data){
                            this.goodsInfo = res.data.data
                            let sildershow = []
                            sildershow.push(res.data.data.img1)
                            sildershow.push(res.data.data.img2)
                            sildershow.push(res.data.data.img3)
                            delete this.goodsInfo.img1
                            delete this.goodsInfo.img2
                            delete this.goodsInfo.img3
                            this.goodsInfo.sildershow = sildershow
                        }else{
                            Toast('服务器错误，数据取得失败')
                        }
                    }
                    console.log("=========",this.goodsInfo);
                })
                .catch(err=>{
                    console.log(err);
                })
                
            },
            addShoppingCart(){
                if(this.goodsInfo.stock>0){
                    if(this.userId){
                        axios({
                            url: 'http://localhost:3000/goods/addGoodsToCart',
                            method: 'post',
                            data:{
                                userId: this.userId,
                                goodsId: this.goodsId,
                                goodsName: this.goodsInfo.productName,
                                goodsImg: this.goodsInfo.productImg,
                                goodsPrice: this.goodsInfo.presentPrice,
                                goodsQuanity: 1
                            }
                        }).then(res =>{
                            console.log(res);
                            this.$router.push({name:'Cart'})
                        })
                    }else{
                        Toast.fail('请先登录账号')
                    }
                }else{
                    Toast.fail("当前商品无库存")
                }
                
            },
            settleGoods(){
                if(this.userId){
                    if(this.goodsInfo.stock>0){
                        let goodsMessage = {}
                        goodsMessage.goodsId = this.goodsId,
                        goodsMessage.name = this.goodsInfo.productName,
                        goodsMessage.img = this.goodsInfo.productImg,
                        goodsMessage.price = this.goodsInfo.presentPrice,
                        goodsMessage.quanity = 1
                        let settleGoods = {goods:[goodsMessage]}
                        localStorage.settleGoods = JSON.stringify(settleGoods)
                        console.log("selectGoods=======",settleGoods);
                        this.$router.push({ name:'productOrder'})
                    }else{
                        Toast.fail("当前商品无库存")
                    }
                }else{
                    Toast.fail('请先登录账号')
                }
            }
        },
    }
</script>

<style scoped>
   .detail{
     font-size:0px;
    }
    .goods-name{
        text-align: left;
        padding-left: 1rem;
        padding-top: .5rem;
    }
    .goods-text{
        background-color: red;
    }
    .list-item-price{
        display: flex;
        margin-left: 1rem;
        margin-top: 1rem;
        padding-bottom: 1rem;
    }
    .discount{
        color: #fff;
        margin-right: 2rem;
    }
    .price-text{
        text-decoration: line-through;
         /* display:block; */
    }
    .stock-text{
        margin-top: 1rem;
        margin-left: 3rem;
        font-size: .9rem;
    }

    .goods-bottom{
        position:fixed;
        bottom:0px;
        left:0px;
        background-color: #FFF;
        width:100%;
        display: flex;
        flex-direction: row;
        flex-flow:nowrap;
    }

    .goods-bottom > div {
        flex:1;
        padding:5px;
    }
</style>